<template>
  <div class="depwrap">
    <el-popover
      placement="bottom-start"
      class="orgTree"
      trigger="click"
      v-model="visible"
    >
      <el-tree
        :data="tableData"
        :props="defaultProps"
        :expand-on-click-node="false"
        accordion
        node-key="id"
        style="width: 300px"
        @node-click="handleNodeClickDep"
      ></el-tree>
      <el-input
        slot="reference"
        ref="input"
        v-model="name"
        clearable
        :readonly="true"
        style="width: 100%"
        placeholder="请选择上一级部门"
      ></el-input>
    </el-popover>
    <i @click.stop="closeName" class="el-icon-circle-close" v-if="name"></i>
    <i class="el-icon-arrow-down" v-else></i>
  </div>
</template>
<script>
import { compact } from 'lodash'
export default {
  data() {
    return {
      visible: false,
      name: '',
      defaultProps: {
        children: 'childList',
        label: 'name',
      },
    }
  },
  props: ['tableData', 'parentName'],
  watch: {
    parentName: {
      immediate: true,
      handler(v) {
        this.name = v
      },
    },
  },
  methods: {
    // 清空
    closeName() {
      this.name = ''
      this.visible = false
      this.$emit('emit', {})
    },
    // 选中
    handleNodeClickDep(row) {
      let { name, deptFullnamepath } = row
      let size = compact(deptFullnamepath.split('/')).length
      if (size >= 4) {
        this.warnMsg('组织架构最多四层级别，请重新选择！')
        return
      }
      this.name = name
      this.visible = false
      this.$emit('emit', row)
    },
  },
}
</script>
<style scoped lang="scss">
.top_unit i.el-icon-circle-close,
.top_unit i.el-icon-arrow-down {
  position: absolute;
  right: 10px;
  top: 13px;
  cursor: pointer;
}
</style>